<template>
  <div class="searchRanderList">
    <div class="contian">
      <ul class="ul1">
        <li class="classC" v-for="(value, index) in renderList" :key="index">
          <div class="imgBox">
            <img :src="value.bannerFileUrl" alt="" class="imgSrc" />
          </div>
          <ul class="ul2">
            <li class="courseTitle">{{ value.courseTitle }}</li>
            <li class="freeGrey">
              共{{ value.subSectionNum }}节课 |
              {{ value.learningNum }}人报名学习
            </li>
            <li class="freeColor" v-if="value.discountPrice == 0">免费</li>
            <li class="discountPrice" v-else>
              <span>&yen;{{ value.discountPrice }}</span>
              <span class="coursePrice" v-if="value.coursePrice!=''">{{ value.coursePrice }}</span>
              <span class="timeLimit">{{ value.discountDesc }}</span>
            </li>
          </ul>
        </li>
        <div style="clear: both"></div>
      </ul>
      <div class="pagingBox">
          <el-pagination background layout="prev, pager, next" :total="total" v-show='renderList'>
    </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchRanderList",
  data() {
    return {};
  },
  methods: {},
  props: {
    renderList: Array,
    total:Number
  },
 
};
</script>

<style lang="less" scoped>
   
.ul1 {
  width: 100%;
  margin-top: 10px;
}

.contian {
  width: 1200px;

  margin: auto;
}

.freeClass {
  width: 100%;
  text-align: center;
}

.classC {
  width: 20%;
  float: left;
  margin-top: 10px;
  cursor: pointer;
}

.imgSrc {
  width: 223px;
  height: 122px;
  transition-duration: 1s;
}

.ul2 .freeColor {
  color: #00cf8c;
  font-size: 16px;
  height: 19.2px  ;
}

.ul2 li {
  margin-top: 3px;
  font-size: 14px;
}

.freeColor {
  color: #00cf8c;
  font-size: 16px;
}

.freeGrey {
  color: #888;
}

.imgSrc:hover {
  transform: scale(1.05);
}

.qualityGoods {
  margin-top: 40px;
}

.discountPrice {
  font-size: 16px;
  color: #ff4500;
  font-weight: 500;
  position: relative;
}

.coursePrice {
  color: #999;
  text-decoration: line-through;
  font-size: 12px;
}

.timeLimit {
  color: #fa8c16;
  background: #fff7e6;
  border-color: #ffd591;
  border: 1px solid #d9d9d9;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  float: right;
  margin-left: 8px;
  position: absolute;
  top: 0px;
  right: 20px;
}

.timeLimit:hover {
  opacity: 0.85;
}

.courseTitle:hover {
  color: #00cf8c;
  opacity: 0.85;
}

.imgBox {
  width: 223px;
  height: 122px;
  overflow: hidden;
}
.courseTitle {
  width: 235px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagingBox{
    margin-top: 20px;
    text-align: center;
}
</style>